<ion-header>
  <ion-toolbar>
    <ion-title>Utilities</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding class="util-demo">
  <ion-row class="text-align-row">
    <ion-col col-4>
      <div text-center>text-center</div>
    </ion-col>
    <ion-col col-4>
      <div text-sm-center>text-sm-center</div>
    </ion-col>
    <ion-col col-4>
      <div text-md-center>text-md-center</div>
    </ion-col>
    <ion-col col-4>
      <div text-lg-center>text-lg-center</div>
    </ion-col>
    <ion-col col-4>
      <div text-xl-center>text-xl-center</div>
    </ion-col>
  </ion-row>

  <ion-row class="text-align-row">
    <ion-col col-4>
      <div text-nowrap>text-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
    </ion-col>
    <ion-col col-4>
      <div text-sm-nowrap>text-sm-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
    </ion-col>
    <ion-col col-4>
      <div text-md-nowrap>text-md-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
    </ion-col>
    <ion-col col-4>
      <div text-lg-nowrap>text-lg-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
    </ion-col>
    <ion-col col-4>
      <div text-xl-nowrap>text-xl-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
    </ion-col>
  </ion-row>

  <ion-row class="text-transform-row">
    <ion-col col-4>
      <div text-uppercase>text-uppercase</div>
    </ion-col>
    <ion-col col-4>
      <div text-sm-uppercase>text-sm-uppercase</div>
    </ion-col>
    <ion-col col-4>
      <div text-md-uppercase>text-md-uppercase</div>
    </ion-col>
    <ion-col col-4>
      <div text-lg-uppercase>text-lg-uppercase</div>
    </ion-col>
    <ion-col col-4>
      <div text-xl-uppercase>text-xl-uppercase</div>
    </ion-col>
  </ion-row>

  <div class="float-elements-row">
    <div float-left>float-left</div>
    <div float-sm-left>float-sm-left</div>
    <div float-md-left>float-md-left</div>
    <div float-lg-left>float-lg-left</div>
    <div float-xl-left>float-xl-left</div>
  </div>

  <div class="float-elements-row">
    <div float-right>float-right</div>
    <div float-sm-right>float-sm-right</div>
    <div float-md-right>float-md-right</div>
    <div float-lg-right>float-lg-right</div>
    <div float-xl-right>float-xl-right</div>
  </div>

  <div class="float-elements-row">
    <div float-start>float-start</div>
    <div float-sm-start>float-sm-start</div>
    <div float-md-start>float-md-start</div>
    <div float-lg-start>float-lg-start</div>
    <div float-xl-start>float-xl-start</div>
  </div>

  <div class="float-elements-row">
    <div float-end>float-end</div>
    <div float-sm-end>float-sm-end</div>
    <div float-md-end>float-md-end</div>
    <div float-lg-end>float-lg-end</div>
    <div float-xl-end>float-xl-end</div>
  </div>

  <div class="float-elements-row" dir="rtl">
    <div float-start>float-start</div>
    <div float-sm-start>float-sm-start</div>
    <div float-md-start>float-md-start</div>
    <div float-lg-start>float-lg-start</div>
    <div float-xl-start>float-xl-start</div>
  </div>

  <div class="float-elements-row" dir="rtl">
    <div float-end>float-end</div>
    <div float-sm-end>float-sm-end</div>
    <div float-md-end>float-md-end</div>
    <div float-lg-end>float-lg-end</div>
    <div float-xl-end>float-xl-end</div>
  </div>
</ion-content>

<style>
.util-demo div {
  border: 1px solid #dedede;
  padding: 5px;
  display: block;
}

.util-demo .text-transform-row div {
  background-color: lightblue;
}

.util-demo .text-align-row div {
  background-color: lightpink;
  overflow: hidden;
  text-overflow: ellipsis;
}

.util-demo .float-elements-row {
  border: none;
}

.util-demo .float-elements-row div {
  background-color: lightyellow;
  height: 40px;
}

</style>